<!-- 购物车商品卡片 -->
<template>
    <view class="cardBox" @tap="toDetail">
        <u-checkbox
            class="check"
            shape="circle"
            :checked="item.checked"
            :name="item.productId"
            activeColor="#9F07B7"
        />
        <u--image width="140rpx" height="140rpx" :src="item.productInfo.image" mode="widthFix" />
		<view class="infoBox">
			<view class="title">
				{{item.productInfo.storeName}}
			</view>
			<view class="sallBox">
				<view class="priceBox">
					<view class="nowPrice">
						<text class="unit">￥</text>
						<text class="money">{{item.productInfo.price}}</text>
					</view>
				</view>
                <view class="numberBox">
                    <u-icon name="minus-circle" color="#9F07B7" size="50rpx" />
                    <view class="cartNum">{{item.cartNum}}</view>
                    <u-icon name="plus-circle-fill" color="#9F07B7" size="50rpx" />
                </view>
			</view>
		</view>
    </view>
</template>

<script>
    export default {
        name:"productCard",
		props: {
			item: Object
		},
        data() {
            return {
                
            };
        },
		methods: {
            toDetail() {
                // 跳转详情页
                uni.navigateTo({
                    url: '/pages/productDetail/productDetail?productData=' + JSON.stringify(this.item)
                })
            }
		}
    }
</script>

<style lang="scss" scoped>
	.cardBox {
		margin: 20rpx 0;
		display: flex;
        align-items: center;
        .check {
            margin-right: 30rpx;
        }
		.infoBox {
            flex: 1;
			margin-left: 20rpx;
			.title {
				font-size: 28rpx;
				color: $uni-text-color-grey-6;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}
			.sallBox {
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				.priceBox {
					.nowPrice {
						color: $uni-text-color-money;
						font-weight: bold;
						.unit {
							font-family: DIN Alternate, DIN Alternate;
							font-size: 24rpx;
						}
						.money {
							font-family: DIN Alternate, DIN Alternate;
							font-size: 32rpx;
						}
						.moneyType {
							margin-left: 8rpx;
							font-size: 20rpx;
							font-weight: 500;
						}
					}
					.oldPrice {
						font-weight: 400;
						font-size: 22rpx;
						color: $uni-text-color-grey-6;
					}
				}
                
                .numberBox {
                    display: flex;
                    align-items: center;
                    
                    .cartNum {
                        width: 50rpx;
                        text-align: center;
                        font-weight: 500;
                        font-size: 30rpx;
                        color: $uni-text-color-black;
                    }
                }
			}
		}
	}
</style>